@import (reference) "~weaver-mobile/dist/weaver-mobile.less";

@emailMenu: email-menu;

.@{emailMenu} {
  &-header {
    display: flex;
    background: @fill-base;
    padding: @v-spacing-lg @h-spacing-lg @v-spacing-lg - 7 * @hd;
    &-img {
      flex: 0;
      flex-basis: auto;
      padding-right: @h-spacing-lg;
    }
    &-info {
      flex: 1;
      padding-top: @v-spacing-md;
      &-name {
        font-size: @font-size-heading;
      }
      &-position {
        color: @color-text-caption;
        margin-top: @v-spacing-md;
        > span {
          margin-right: @h-spacing-md;
        }
      }
    }
    &-title {
      flex: 1;
      font-size: 20 * @hd;
      padding: @v-spacing-lg @h-spacing-lg;
    }
    &-setting {
      flex: 0;
      flex-basis: auto;
      color: @color-text-caption;
      overflow: hidden;
      width: 20 * @hd;
      padding-right: 20 * @hd;
      position: relative;
      .am-icon {
        width: 20 * @hd;
        height: 20 * @hd;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }
    }
  }
  &-body {
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background: @fill-body;
    .@{emailMenu}-list {
      .am-list {
        background: @fill-base;
        &-header {
          padding-bottom: @v-spacing-sm;
        }
        &-body {
          border-bottom: none;
        }
      }
      &-title {
        padding-left: @icon-size-xs + @v-spacing-lg;
      }
      &-item {
        display: flex;
        &-icon {
          flex: 0;
          flex-basis: auto;
          &.label {
            vertical-align: middle;
          }
          .am-icon {
            width: @icon-size-xs;
            height: @icon-size-xs;
            vertical-align: middle;
            color: @color-text-paragraph;
          }
          &-label {
            width: @icon-size-xs;
            height: @icon-size-xs;
            border-radius: 2 * @hd;
            border: @border-width-md solid @border-color-base;
            vertical-align: middle;
          }
        }
        &-label {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        &-num {
          flex: 0;
          flex-basis: auto;
          color: @color-text-caption;
          padding-right: @h-spacing-lg;
        }
      }
    }
  }
  &-bar {
    @barSize: 45 * @hd;
    position: absolute;
    bottom: 25 * @hd;
    right: 25 * @hd;
    width: @barSize;
    height: @barSize;
    background: @brand-primary;
    border-radius: 100%;
    color: @color-text-base-inverse;
    box-sizing: border-box;
    .am-icon {
      width: @icon-size-xs;
      height: @icon-size-xs;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .email-nav-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    .email-nav-bar-left {
      visibility: hidden;
    }
  }
}
